<template>
	<view class="find-search-input y-flex y-row y-align-center" :style="{'background-color': bgColor, 'border-radius': borderRadius + 'rpx'}" @tap="handleTap">
		<com-icon name="search" size="28" weight="bold" :color="color"></com-icon>
		<input confirm-type="search" class="ml-20 fs-30 y-flex-1"
		v-model="keyword"
		:placeholder="placeholder"
		:disabled="!enableSearch"
		:style="{color: color}"
		type="text" @tap="handleTap" @input="handleInput" @confirm="handleConfirm">
		<com-icon name="round_close_fill" class="ml-20" :style="{'visibility': keyword.length > 0 ? 'visible' : 'hidden'}" size="35" :color="skinColor.color_gap_1" @click="handleClear"></com-icon>
		<text class="fs-28 ml-20" :style="{color: color}" v-if="enableSearch" @tap="handleConfirm">搜索</text>
		<!-- <com-text style="margin-left: 20rpx" :value="placeholder" size="30" :color="color"></com-text> -->
	</view>
</template>

<script>
	export default {
		inject: ['getSkinColor', 'navigate', 'toast'],
		props: {
			value: {
				type: String,
				default: ''
			},
			options: {
				type: Object,
				default () {
					return new Object
				}
			},
			bgColor: {
				type: String,
				default: ''
			}
		},
		computed: {
			skinColor () {
				return this.getSkinColor()
			},
			color () {
				return this.skinColor.color_3
			},
			borderRadius () {
				return this.options.borderRadius
			},
			placeholder () {
				return this.options.placeholder || '输入关键词'
			},
			enableSearch () {
				return this.options.enableSearch || 0
			}
		},
		data () {
			return {
				keyword: ''
			}
		},
		created() {
			this.keyword = this.value
		},
		methods: {
			handleTap () {
				if ( this.enableSearch ) return
				this.navigate(this.options.url)
			},
			handleClear () {
				this.keyword = ''
				this.$emit('clear')
			},
			handleInput () {
				this.$emit('input', this.keyword)
			},
			handleConfirm () {
				if ( !this.keyword ) {
					this.toast('请输入搜索关键词')
					return
				}
				if ( this.options.url ) {
					const url = this.options.url
					this.navigate(url + (url.indexOf('?') > -1 ? '&' : '?') + 'keyword=' + this.keyword)
				} else {
					this.$emit('confirm', this.keyword)
				}
			}
		},
		watch: {
			value (newVal) {
				this.keyword = newVal
			}
		}
	}
</script>

<style>
	.find-search-input {
		padding: 15rpx 30rpx;
	}
</style>